<template>
  <div class="chatuser">
    <div class="header">
      <span @click="closechat">&lt;</span>
      <div>{{ touser.username }}</div>
      <div></div>
    </div>

    <div class="chatlist" ref="chatbox">
      <div class="chatitem" v-for="(item,index) in chatlist" :key="index" :class="{self:$root.me.username == item.from.username}">
        <div class="avator">
            <img :src="item.from.avator" alt="">
        </div>
        <div class="chatcontent">
            {{item.content}}
        </div>
      </div>
    </div>

    <div class="inputcom">
      <input type="text"  @keydown.enter="sendMsg" v-model="inputMsg" />
      <button @click="sendMsg">提交</button>
    </div>
  </div>
</template>

<script>
import socket from '../socket'
export default {
  props: ["touser", "closechat","newMsg"],
  data() {
    return {
      inputMsg : "",
      chatlist: []
    }
  },
  methods: {
    sendMsg: function(){
      let msg = {
          from: this.$root.me,
          to: this.touser,
          content: this.inputMsg,
          time: new Date().getTime()
      }
      //把数据发给服务端
      socket.emit('sendMsg',msg)
      
      this.chatlist.push(msg)
      this.inputMsg = ""
      //将数据存储到本地
      this.saveStorage()
    },
    saveStorage(){
      let keystr = 'chat-user-' + this.$root.me.username + '-' + this.touser.username
      localStorage[keystr] = JSON.stringify(this.chatlist)
    },
    getStorage(){
      let keystr = 'chat-user-' + this.$root.me.username + '-' + this.touser.username
      localStorage[keystr] = localStorage[keystr]?localStorage[keystr]:'[]';
      this.chatlist = JSON.parse(localStorage[keystr]) 
    },
    toBottom(){
      let chatbox = this.$refs.chatbox
      chatbox.scrollTop = chatbox.scrollHeight - chatbox.clientHeight
    }
  },
  beforeMount() {
    this.getStorage()
    socket.emit('readMsg',{
      self: this.$root.me.username,
      username: this.touser.username
    })
  },
  mounted() {
    this.toBottom()
  },
  watch:{
    newMsg: function(val){
      this.chatlist.push(val)
      this.saveStorage()
    }
  },
  updated() {
    //拉低，查看最新信息
    this.toBottom()
  },
};
</script>

<style scoped>
.chatuser {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #efefef;
}

.chatlist{
  overflow: scroll;
}

.chatitem{
  display: flex;
  margin: 10px;
}

.chatitem.self{
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.chatitem .avator img{
    width: 40px;
    height: 40px;
    border-radius: 5px;
}

.chatitem .chatcontent{
    height: 40px;
    border-radius: 5px;
    background-color: skyblue;
    font-size: 15px;
    line-height: 40px;
    padding: 0 10px;
    margin-left: 10px;
    position: relative;
}

.chatitem.self .chatcontent{
   margin-right: 10px;
}

.chatitem .chatcontent::before{
    display: block;
    position: absolute;
    content: "";
    border-right: 10px solid skyblue;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    left: -5px;
    top: 20px;
}

.chatitem.self .chatcontent::before{
   display: block;
    position: absolute;
    content: "";
    border-left: 10px solid skyblue;
    border-right: none;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    /* 要把前面的left属性和border-right设置成initial */
    left: initial; 
    right: -5px;
    top: 20px;
}

.header {
  width: 100%;
  height: 40px;
  display: flex;
  background-color: skyblue;
  align-items: center;
  justify-content: space-between;
  color: aliceblue;
}
.header span {
  padding-left: 20px;
}

.chatlist {
  flex: 1;
}

.inputcom {
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
}

.inputcom input {
  width: 250px;
  height: 30px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #ccc;
}
.inputcom button {
  width: 80px;
  height: 30px;
  border-radius: 5px;
  outline: none;
  border: 1px solid #ccc;
}
</style>